<html>

<head>
    <title>Three.js案例-文字</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }

        canvas {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <script type="importmap">
        {
            "imports": {
                "three": "https://unpkg.com/three@0.162.0/build/three.module.js",
                "three/addons/": "https://unpkg.com/three@0.162.0/examples/jsm/"
            }
        }
</script>
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/three.js/r99/three.js"></script> -->
    <script type="module">

        import * as THREE from 'three';

        import { FontLoader } from 'three/addons/loaders/FontLoader.js';
        import { TextGeometry } from 'three/addons/geometries/TextGeometry.js';

        /* 兼容性检测 */
        animate();
        
        let fontName = 'helvetiker'
        let fontWeight = 'bold'
        function loadFont() {

            const loader = new FontLoader();
            loader.load('fonts/' + fontName + '_' + fontWeight + '.typeface.json', function (response) {

                font = response;
                refreshText();
            });

        }


        function animate() {
            //1. 创建场景
            const scene = new THREE.Scene();

            // 创建渲染器
            const renderer = new THREE.WebGLRenderer({ antialias: true });
            renderer.setPixelRatio(window.devicePixelRatio);
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);

            // 创建相机 
            /*
                PerspectiveCamera 透视相机
                视野角度（FOV）
                长宽比（aspect ratio）
                近截面（near）
                远截面（far）
             */
            camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 1, 1500);
            camera.position.set(0, 400, 700);
            const cameraTarget = new THREE.Vector3(0, 150, 0);
            camera.lookAt(cameraTarget);


            const textGeo = new TextGeometry('NHB', {
                font: font,
                size: 70,
                height: 20,
                curveSegments: 4,
                bevelThickness: 2,
                bevelSize: 1.5,
                bevelEnabled: true
            });



            const dirLight = new THREE.DirectionalLight(0xffffff, 0.4);
            dirLight.position.set(0, 0, 1).normalize();
            scene.add(dirLight);
            renderer.render(scene, camera);
        }
    </script>
</body>

</html>